<template>
	<view class="goodsBox">
		<view class="goodsItem" v-for="item in list" :key="item.id" @click="goDetailFn(item.id)">
			<image :src="item.list_pic_url" class="goodImg" mode="widthFix"></image>
			<view class="goodname">{{item.name}}</view>
			<view style="color:#8b0000;height: 80rpx;line-height: 80rpx;"> ￥
				{{ item.retail_price | handelPrice}} 元
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			goDetailFn(id) {
				uni.navigateTo({
					url: `../../pages/details/details?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goodsBox {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.goodsItem {
		width: calc(50vw - 25px);
		font-size: 28rpx;
		text-align: center;
	}

	.goodname {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.goodImg {
		width: calc(50vw - 25px);
		height: 368rpx;
	}
</style>
